<template>
  <v-dialog v-model="dialog" persistent transition="fab-transition" max-width="800">
    <v-card tile>
      <div class="d-flex justify-space-between mb-5">
        <v-card-title class="py-3">粉丝</v-card-title>

        <v-btn icon text @click="closeModal">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </div>

      <v-card-text class="px-3">
        <v-row>
          <v-col cols="12" sm="12" md="12" lg="12" class="pt-0 px-0">
            <v-data-table :headers="headers" :items="fans" :loading="loading" sort-by="calories">
              <template v-slot:item.channel="{ item }">
                <!-- <v-avatar size="35" color="red" class="white--text" router :to="`/channels/${item.userId}`">
                  <template v-if="item.avatar !== 'no-photo.jpg'">
                    <img :src="item.avatar
                      " :alt="`${item.avatar} avatar`" />
                  </template>
<span v-else class="headline">
  {{
  item.nickName.split('')[0].toUpperCase()
  }}
</span>
</v-avatar> -->
                <v-list-item class="pl-0 pt-3" router :to="`/channels/${item.userId}`">
                  <v-list-item-avatar>
                    <v-img v-if="item.avatar !== 'no-photo.jpg'" class="elevation-6" :src="item.avatar"></v-img>
                    <v-avatar v-else color="red">
                      <span class="white--text headline ">
                        {{ item.nickName.split('')[0].toUpperCase() }}</span>
                    </v-avatar>
                  </v-list-item-avatar>
                  <span class="pl-2">{{ item.nickName }}</span>
                </v-list-item>

              </template>
              <!-- <template v-slot:item.actions="{ item }">
                <v-btn
                  text
                  small
                  class="mr-2 blue--text text--darken-4"
                  @click="subscribe(item)"
                >
                  Subscribe
                </v-btn>
              </template> -->
              <template v-slot:no-data>
                暂无数据
              </template>
            </v-data-table>
            <v-pagination v-if="Math.ceil(totalPage / limit) > 1" class="pagination" v-model="curPage"
              :length="Math.ceil(totalPage / limit)" total-visible="7"
              @input="onPageChange(curPage, limit)"></v-pagination>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
import { getFansList } from '../services/UserRequest';

export default {
  name: 'FansModal',
  props: ['openDialog'],
  data: function () {
    return {
      curPage: 1,
      limit: 10,
      totalPage: 0,
      headers: [
        {
          text: '昵称',
          align: 'start',
          value: 'channel'
        }
        // { text: 'Actions', value: 'actions', align: 'end', sortable: false }
      ],
      fans: [],
      loading: true
    }
  },
  computed: {
    dialog() {
      return this.openDialog
    }
  },
  methods: {
    onPageChange(curPage, limit) {
      this.refreshList(curPage, limit);
    },
    refreshList(curPage = 1, limit = 10) {
      this.curPage = curPage
      this.limit = limit
      this.getfans()
    },
    async getfans() {
      this.loading = true
      const fans = await getFansList({ pageIndex: this.curPage, pageSize: this.limit })
        .catch((err) => console.log(err))
        .finally(() => {
          this.loading = false
        })
      console.log(fans)
      if (!fans) return
      this.fans = fans.data.data

    },
    initialize() {
      this.fans = [
      ]
    },
    subscribe(item) {
      console.log(item)
    },
    closeModal() {
      this.$emit('closeDialog')
    }
  },
  mounted() {
    // this.initialize()
    this.getfans()
  }
}
</script>
